<template>
	<view>
		<view class="order_tab">
			<view class="tab_item" :class="index == tabIndex ? 'tab_select':''" v-for="(item,index) in tabList"
				:key="index" @tap="chageTab(index)">
				<view class="">
					{{item}}
				</view>
			</view>
		</view>
		<view class="placeholder"></view>
		<view v-if="tabIndex==0">
			<!-- <video v-if="list[3].length" :src="list[3][0]" style="width: 100%;"></video> -->
			<image v-if="list[0].length" v-for="(item,index) in list[0]" :src="item" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view v-if="tabIndex==1">
			<!-- <video v-if="list[4].length" :src="list[4][0]" style="width: 100%;"></video> -->
			<image v-if="list[1].length" v-for="(item,index) in list[1]" :src="item" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view v-if="tabIndex==2">
			<!-- <video v-if="list[5].length" :src="list[5][0]" style="width: 100%;"></video> -->
			<image v-if="list[2].length" v-for="(item,index) in list[2]" :src="item" mode="widthFix" style="width: 100%;"></image>
		</view>

	</view>
</template>

<script>
	import {explain} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['点餐流程', '订单号查询', '评价查询'],
				list:[],
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			chageTab(index) {
				this.tabIndex = index;
			},
			//获取数据
			loadData: function () {
			  explain({}).then((res) => {
			  		if(res.code == 1){
			  			this.list = res.data;
			  		}
			  }).catch(err => {
			  	console.log(err)
			  })
			  
			},	
		}
	}
</script>

<style>
	.order_tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 70rpx;
		border-radius: 12rpx;
		background-color: #FFFFFF;
		padding-bottom: 18rpx;
	    position: fixed;
	    width: 100%;
	    left: 0;
	    top: 44px;
	    z-index: 999;
	}

	.order_tab .tab_item {
		text-align: center;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #5f5f5f;
		position: relative;
		flex: 1;
		word-wrap: break-word;
		overflow: hidden;
		overflow-x: scroll;
	}

	.order_tab .tab_select {
		// 选中字体颜色
		color: #333;
		font-weight: 700;
	}

	.order_tab .tab_select:after {
		content: '';
		width: 100rpx;
		height: 4rpx;
		background: #ff8546;
		border-radius: 6rpx;
		position: absolute;
		bottom: 0;
	}
	.placeholder{
		width: 100%;
		height: 100upx;
	}
</style>
